<template>
  <div id="app">
    <nav>
      <!-- <router-link to="/home">Home</router-link> | -->
      <button @click="fn1">Home</button>|
      <!-- <router-link to="/">重定向到About</router-link> | -->
      <!-- <router-link to="/about">About</router-link> -->
      <button @click="fn2">about</button>
    </nav>
    <router-view />
  </div>
</template>
<script>
export default {
  methods: {
    fn1 () {
      //等价于router-link
      // this.$router.push('home');
      //通过 路由配置的path值
      //this.$router.push({ path: 'home1' })
      //name 路由配置的name值 params 传的值 如果提供了 path，params 对象属性会被忽略
      //this.$router.push({ path: 'home1', query: { userId: '123' } })
      //this.$router.push({ path: 'home1', params: { userId: '123' } })
      this.$router.push({ name: 'home', params: { userId: '123' } })
    },
    fn2 () {
      this.$router.replace("/about")
    }
  }
}
</script>>

<style lang="less">
</style>

